<!--
 * @Author: dfh
 * @Date: 2024-03-20 14:03:38
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <view class="card">
            <view class="row-item txt-black-34 txt-32 txt-w-6">渣打银行香港</view>
            <picker class="openTypeHandle" mode="selector" :range="typesList" range-key="name" :value="typeIndx"
                @change="onOpenTypeHandle">
                <view class="row-item jc-between line">
                    <text class="txt-black-34 txt-26">开户方式</text>
                    <view class="flex ai-center">
                        <text class="txt-black-34 txt-26">{{ getOpenBankTypeFn()
                            }}</text>
                        <text class="iconfont icon-arrow-right-bold txt-black-102 ml-10"></text>
                    </view>
                </view>
            </picker>
            <picker mode="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
                <view class="row-item jc-between line">
                    <text class="txt-black-34 txt-26">开户日期</text>
                    <view class="flex ai-center">
                        <text class="txt-black-34 txt-26" v-if="formData.date">{{ formData.date }}</text>
                        <text class="txt-black-102 txt-26" v-else>请选择</text>
                        <text class="iconfont icon-arrow-right-bold txt-black-102 ml-10"></text>
                    </view>
                </view>
            </picker>
            <view class="row-item jc-between line" @click="onShowProvince">
                <text class="txt-black-34 txt-26">所在城市</text>
                <view class="flex ai-center">
                    <text class="txt-black-34 txt-26" v-if="formData.address">{{ formData.address }}</text>
                    <text class="txt-black-102 txt-26" v-else>请选择</text>
                    <text class="iconfont icon-arrow-right-bold txt-black-102 ml-10"></text>
                </view>
            </view>
        </view>

        <view class="card mt-30">
            <view class="row-item jc-between line">
                <text class="txt-black-34 txt-26">姓名</text>
                <input class="flex-1 txt-black-34 txt-26" placeholder-class="p-c" placeholder="请输入姓名"
                    style="text-align: right;" v-model="formData.username" />
            </view>
            <view class="row-item jc-between line">
                <text class="txt-black-34 txt-26">手机号</text>
                <input class="flex-1 txt-black-34 txt-26" placeholder-class="p-c" type="number" placeholder="请输入手机号"
                    style="text-align: right;" v-model="formData.mobile" />
            </view>
        </view>
        <PickerSelect ref="pickeEle" @confirm="provinceBC" />
        <button class="btn" @click="registerHandle">立即预约</button>
    </view>
</template>

<script setup>
import PickerSelect from '@/components/picker-select/index.vue'
import { validatePhoneNumber } from '@/utils/index'
import { registerAppointBank } from '@/services/bank'
import { ref, watchEffect } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { queryOpenTypes } from '@/services/bank';
import {showToast} from '@/utils/toast'

const pickeEle = ref(null);
const p_c_a = ref({
    p_name: '',
    c_name: '',
    a_name: ''
});
const formData = ref({
    openMethod: '',
    username: '',
    mobile: '',
    address: '',
    date: ''
})
const id = ref('')
const typesList = ref([])
const typeIndx = ref(0)

onLoad((options) => {
    id.value = options.id;
    geOpenTypes();
})

watchEffect(() => {
    if (typesList && typesList.length > 0)
        formData.value.openMethod = typesList.value[typeIndx.value].typeId;
})

const getOpenBankTypeFn=()=>{
    return typesList.value && typesList.value.length > 0 ?  typesList.value[typeIndx.value].name :''
}
const onShowProvince = () => {
    pickeEle.value.onShowProvince();
}

const provinceBC = ({ provinces = {}, city = {}, area = {} }) => {
    if (provinces.id || city.id || area.id) {
        formData.value.address = `${provinces.fullname}、${city.fullname}、${area.fullname}`
        p_c_a.value = { p_name: provinces.fullname, c_name: city.fullname, a_name: area.fullname }
    }
}
const bindDateChange = (e) => {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    formData.value.date = e.detail.value;
}

const onOpenTypeHandle = (e) => {
    typeIndx.value = e.detail.value;
}

const geOpenTypes = async () => {
    const { msg, status, data } = await queryOpenTypes(id.value);
    if (status === 1) {
        typesList.value = data || [];
    } else {
        showToast(msg)
    }
}


const registerHandle = async () => {
    const { username, mobile, address } = formData.value;
    let title = ''
    if (address == '') {
        title = '请输入正确的地址'
    }
    if (!validatePhoneNumber(mobile)) {
        title = '请输入正确的手机号'
    }
    if (username == '') {
        title = '请输入正确的用户名'
    }
    if (title != '') {
        uni.showToast({ title, icon: 'none' })
        return;
    }

    const { msg, status, data } = await registerAppointBank({
        name: username,
        mobile,
        address
    })
    if (status == 1) {
        uni.redirectTo({ url: '/pages/success/index' })
    } else {
        uni.showToast({ title: msg || '请重试', icon: 'none' });
    }
}
</script>
<style>
.p-c {
    font-size: 26rpx
}
</style>
<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #F0F4F8;

    .card {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: white;

        .row-item {
            height: 80rpx;
            display: flex;
            align-items: center;
            padding: 0 30rpx;
            box-sizing: border-box;

            &.line {
                border-bottom: 2rpx solid rgba(241, 243, 245, 1);
            }
        }
    }

    .btn {
        position: absolute;
        left: 6%;
        bottom: 80rpx;
        width: 86%;
        height: 100rpx;
        border-radius: 50rpx;
        background: #0572e7;
        color: white;
        line-height: 100rpx;
    }
}
</style>